<template>
  <div class="product">
    <div style="height:44px"></div>
    <topBack class="topBack">
      <ul>
        <li @click="click(index)" v-for="(item,index) in nav" :key="index">
          <span :class="num == index ? 'active' : ''">
            <i v-show="num == index" class="fa fa-map-marker" aria-hidden="true"></i>
            {{item}}
          </span>
        </li>
      </ul>
    </topBack>
    <div class="sp" ref="sp">
      <!-- //商品图片 -->
      <img :src="src" />
      <!-- 商品id:{{id}}, -->
      <!-- 商品价格: -->
      <div class="price">¥{{price}}</div>
      <!-- 商品标题: -->
      <div class="title">{{title}}</div>
    </div>
    <div class="pj" ref="pj">评价</div>
    <div class="xq" ref="xq">
      详情
      商品信息:{{details}}
    </div>
    <div class="tj" ref="tj">推荐</div>
    <cartBar></cartBar>
  </div>
</template>

<script>
import topBack from "../components/topBack";
import cartBar from "../components/cartBar";
export default {
  components: {
    topBack,
    cartBar
  },
  data: function() {
    return {
      nav: ["商品", "评价", "详情", "推荐"],
      nav1: ["sp", "pj", "xq", "tj"],
      num: 0,
      id: 0,
      title: "",
      price: 0,
      details: "好东西",
      src: ""
    };
  },
  mounted: function() {
    console.log(this.$route);
    // this.title = this.$route.query.title
    // this.id = this.$route.params.id
    // this.src = this.$route.query.src
    // this.price = this.$route.params.price
    // this.id = this.$route.query.id
    // this.month = this.$route.query.month

    // this.price = this.$route.query.price
    // this.src = this.$route.params.src
    // this.title = this.$route.params.title
    this.month = this.$route.params.month;
    this.id = this.$route.params.id;

    this.axios
      .get("http://leeyiqing.site/productbyID.php?pid=" + this.id)
      .then(res => {
        console.log(res);
        this.price = res.data[0].price;
        this.src = res.data[0].img;
        this.title = res.data[0].name;
      });
    let sp = document.querySelector(".sp").offsetTop - 44;
    let pj = document.querySelector(".pj").offsetTop - 44;
    let xq = document.querySelector(".xq").offsetTop - 44;
    let tj = document.querySelector(".tj").offsetTop - 44;
    let arr = [sp, pj, xq, tj];
    console.log(arr);
    window.addEventListener("scroll", () => {
      let local = document.documentElement.scrollTop || document.body.scrollTop;
      arr.forEach((item, index) => {
        if (local >= arr[index]) {
          this.num = index;
        }
      });
    });
  },
  beforeCreate:{

  },
  methods: {
    click: function(index) {
      console.log(index);
      this.num = index;
      console.log(this.$refs);
      // let top = document.querySelector('.'+this.nav1[index]).offsetTop - 44
      // console.log(top)
      // document.documentElement.scrollTop = top

      //动画效果
      //当前位置
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      console.log(scrollTop);
      //目的地
      let target =
        document.querySelector("." + this.nav1[index]).offsetTop - 44;
      console.log(target);
      //跳动次数
      let count = 50;
      //每次跳动距离
      let dis = (target - scrollTop) / count;

      var times = setInterval(function() {
        document.documentElement.scrollTop += dis;
        count--;
        if (count <= 0) {
          clearInterval(times);
          document.documentElement.scrollTop = target;
        }
      }, 10);
    }
  }
};
</script>

<style lang="less" scoped>
.product {
  width: 100;
  .topBack {
    position: fixed;
    top: 0;
  }
  ul {
    padding: 0 10% 0 10%;
    box-sizing: border-box;
    list-style: none;
    display: flex;
    justify-content: space-around;

    li {
      color: #666;
      font-size: 14px;

      i {
        padding-right: 3px;
      }
    }
  }
  .active {
    color: #c82519;
  }
  .sp,
  .pj,
  .xq,
  .tj {
    width: 100%;
    height: 1000px;
  }

  .sp {
    img {
      width: 100%;
    }
    .price {
      padding: 16px 10px 0 10px;
      color: rgb(242, 39, 12);
      text-align: left;
      font-size: 26px;
    }
    .title{
        text-align: left;
        padding: 10px;
        font-weight: 700;
        line-height: 24px;

    }
  }
}
</style>